<template>
  <div id="userList" class="same-change-oldstyle">
    <div class="same-head-box">
      <div class="saem-seat-box">
        <div class="saem-seat-left">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>我的用户</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="saem-seat-right">
          <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
          <!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
        </div>
      </div>
      <div class="same-search-box">
        <div>
          <div class="same-search-left">
            <div class="same-search-left">
              <div class="same-left-one">
                <span class="same-search-span">用户名称：</span>
                <el-input size="medium" v-model="name" maxlength="11" placeholder="请输入用户名或微信昵称" style="width: 160px;">
                </el-input>
              </div>
              <div class="same-left-one">
                <span class="same-search-span">用户手机号：</span>
                <el-input size="medium" v-model="userPhone" maxlength="11" placeholder="请输入用户手机号码"
                  style="width: 160px;">
                </el-input>
              </div>
              <div class="same-left-one" v-if="!moveShow">
                <div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">更多查询条件<i
                    :class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
                <el-button type="primary" size="medium" @click="search()">搜索</el-button>
                <el-button type="info" size="medium" @click="reset()">重置</el-button>

              </div>
            </div>
            <div class="same-search-right"></div>
          </div>
          <!-- 搜索更多 -->
          <div>
            <div class="same-search-left new-sear-height" ref="leftHeight">
              <div class="same-left-one">
                <span class="same-search-span same-search-fisrt">注册时间：</span>
                <el-date-picker style="width:140px" v-model="date1" type="date" size="medium" value-format="yyyy-MM-dd"
                  placeholder="起始日期">
                </el-date-picker>
                <div class="same-interval">至</div>
                <el-date-picker style="width:140px" v-model="date2" type="date" size="medium" value-format="yyyy-MM-dd"
                  placeholder="截止日期">
                </el-date-picker>
              </div>
              <div class="same-left-one" :class="[moveShow?'':'new-sear-opacity']">
                <div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">收起更多查询条件<i
                    :class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
                <el-button type="primary" size="medium" @click="search()">搜索</el-button>
                <el-button type="info" size="medium" @click="reset()">重置</el-button>
              </div>
            </div>
            <div class="same-search-right"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="same-table-box">
      <h4 class="same-title-box">
        用户列表
      </h4>
      <div class="table_box">


        <div class="common-table-outer">
          <el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
            :data="tableData" stripe>
            <el-table-column header-align="center" width="70" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(pageNo-1)*pageSize}}
							</template>
						</el-table-column>
            <el-table-column align="center" label="编号">
              <template slot-scope="sccpe">
                {{ sccpe.row.user_no || "——" }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="用户昵称">
              <template slot-scope="sccpe">
                {{ sccpe.row.name || "——" }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="手机号码">
              <template slot-scope="sccpe">
                {{ sccpe.row.phone || "——" }}
              </template>
            </el-table-column>

            <el-table-column align="center" prop="id" label="注册方式">
              <template slot-scope="sccpe">
                <span class="wechat-color" v-if="sccpe.row.user_source == 1">微信</span>
                <span class="alipay-color" v-if="sccpe.row.user_source == 2">支付宝</span>
                <span class="card-color" v-if="sccpe.row.user_source == 5">开卡</span>
              </template>
            </el-table-column>

            <el-table-column align="center" prop="add_time" label="注册时间">
            </el-table-column>

            <el-table-column align="center" prop="equipment_number" label="最后一次消费设备">
            </el-table-column>

            <el-table-column align="center" prop="pay_time" label="最后一次消费时间">
            </el-table-column>

            <el-table-column width="200" align="center" prop="id" label="操作">
              <template slot-scope="sccpe">
                <el-link class="custom-link" @click="cardEdit(sccpe.row.user_id)">编辑</el-link>
                <el-link class="custom-link" @click="handleClick(sccpe.row.user_id)">详情</el-link>
              </template>
            </el-table-column>
            <template slot="empty" v-if="isLoad">
              <div class="new-no-data-show">
                <img src="../../assets/images/no-data.png" alt="">
                <div>暂无相关数据</div>
              </div>
            </template>
          </el-table>

          <div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="pageNo" :page-sizes="sizes" :page-size="pageSize"
              layout="total, prev, pager, next, jumper, sizes" :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { regionDataPlus, CodeToText } from "element-china-area-data";
  import $ from "jquery";

  export default {
    name: "userList",
    data: function () {
      return {
        loading: false, //加载动画
        date1: "",
        date2: "",
        community: "",
        tableData: [],
        userPhone: "",
        name: "",
        cardNum: "",
        pageNo: 1,
        pageSize: 15,
        sizes: [15, 30, 40, 50],
        total: 0,
        isLoad: false,

        moveBtn: false,//是否暂时更多查询条件按钮按钮 搜索条件控制
        moveShow: false,//是否开启动画
        scrollHeight: '',//需要监听的高度
      };
    }, //初始化执行
    created: function () {
      this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
      this.userList();
    },
    inject: ["reload"],
    methods: {
      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload();
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },
      search() {
        this.pageNo = 1;
        this.userList();
      },
      reset() {
        this.pageNo = 1;
        this.userPhone = "";
        this.date1 = "";
        this.date2 = "";
        this.name = "";
        this.userList();
      },
      handleClick(user_id) {
        this.$router.push({ path: "/userview", query: { user_id: user_id } });
      },
      handleSizeChange(val) {
        this.pageNo = 1;
        this.pageSize = val;
        this.userList();
      },
      handleCurrentChange(val) {
        this.pageNo = val;
        this.userList();
      },
      // 用户水卡
      cardList(user_id) {
        this.$router.push({
          path: "/cardlist",
          query: { user_id: user_id },
        });
      },

      cardEdit(user_id) {
        this.$router.push({
          path: "/useredit",
          query: {
            user_id,
          },
        });
      },
      userList() {
        var that = this;
        that.loading = true; //打开loading动画
        that.isLoad = false; //是否加载
        that.$post({
          url: "Partner/Users/getUserListTwo",
          data: {
            page: that.pageNo,
            pageSize: that.pageSize,
            phone: that.userPhone,
            name: that.name,
            start_time: that.date1 ? that.date1 : "",
            end_time: that.date2 ? that.date2 : "",
          },
          success: (data) => {
            that.isLoad = true;
            that.loading = false; //关闭动画
            if (data.code == 1000) {
              that.tableData = []; // 清空数据
              var datalist = data.data.order;
              // datalist.forEach((item)=>{
              //   if(item.balance){
              //     item.balance = item.balance.substr(0,item.balance.length-1);
              //   }
              // })
              that.tableData = datalist;
              that.total = data.data.count;
            } else {
              that.total = 0;
              that.tableData = []; // 清空数据
            }
          },
        });
      },
      //此处获取高度必须在dom元素创建完成之后才能获取
      gitHeight() {
        //  let clientHeight=this.$refs.leftHeight.clientHeight;
        let scrollHeight = this.$refs.leftHeight.scrollHeight;
        this.scrollHeight = scrollHeight;
        scrollHeight <= 30 ? this.moveBtn = false : this.moveBtn = true;

      },
      openMore() {
        this.moveShow = !this.moveShow;
        this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
      },
    },
    mounted() {
      this.gitHeight();
      //监听高度变化 
      var that = this;
      window.addEventListener("resize", function () {
        let scrollHeight = that.$refs.leftHeight && that.$refs.leftHeight.scrollHeight ? that.$refs.leftHeight.scrollHeight : that.scrollHeight;
        that.scrollHeight = scrollHeight;
      });
    },
    watch: {
      // 如果 `scrollHeight` 发生改变，这个函数就会运行 此处是为了防止用户缩小屏幕导致页面显示不全
      scrollHeight: function (val) {
        this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
      }
    },
    activated() {
			if (this.$route.meta.isUpdate) {
				this.tableData = [];
				this.userList()
				this.$route.meta.isUpdate = false;
			}
		},

    beforeRouteEnter (to, from, next) {
      let updates = ["/useredit"]
			if (updates.includes(from.path)) {
				to.meta.isUpdate = true;
			}
      next();
    },
    beforeRouteLeave(to, from, next) {
			let updates = ["/useredit","/userview"];
			if (!updates.includes(to.path)) {
				from.meta.keepAlive = false; 
			} else {
				from.meta.keepAlive = true;
			}
			next();
		}
  };
</script>
<style>
  #userList {
    width: 100%;
    height: 100%;
    background: #ffffff;
  }

  #userList .btn {
    display: inline-block;
    border: 1px solid #2c5586;
    color: #2883be;
    cursor: pointer;
    padding: 0 5px;
    margin: 2px 0px;
    border-radius: 4px;
  }
</style>

<style scoped>
  .wechat-color {
    color: #009b4d;
  }

  .alipay-color {
    color: #2c5586;
  }

  .card-color {
    color: #323333;
  }

  .btn-class:hover,
  .btn-class:active {
    background: #2c5586;
    color: #fff;
  }
</style>